import React from 'react';
import { Route, RouteProps } from 'react-router-dom';

/*
  知识：
  1 children类似render函数。可以自定义渲染任意内容
  2 Switch匹配路由的原理：Route组件匹配不上路由。会返回null
  3 Route匹配不到Switch会把组件卸载掉
  缓存的原理：为匹配到路径时，控制组件隐藏而不是卸载
*/
/*
  学习目标：封装KeepAlive组件，实现路由缓存
  作用：缓存路由，类似vue中keep-alive
  步骤：
     1. 新建一个KeepAlive组件
     2. 定义KeepAlive的acitvePath属性
     3. 控制样式隐藏，而不是卸载
*/
// 1. 新建一个KeepAlive组件
interface KeepAliveProps extends RouteProps {
  // 2. 定义KeepAlive的acitvePath属性
  // 表示要缓存的路由
  activePath: string;
  component: any;
}
export function KeepAlive({ activePath, component: Component, ...restProps }: KeepAliveProps) {
  return (
    <Route
      // 5. 透传剩余属性
      {...restProps}
      children={(_props) => {
        const { pathname } = _props.location;

        // 🔔支持模糊匹配
        const isMatch = pathname.startsWith(activePath);
        return (
          // 3. 控制样式隐藏，而不是卸载
          <div style={{ display: isMatch ? 'block' : 'none' }}>
            {/* 4. 记得透传_props */}
            <Component {..._props} />
          </div>
        );
      }}
    ></Route>
  );
}
